<template>
  <ve-line
    :data="axisOption"
    :settings="chartSettings"
    ref="table"
    height="170px"
    :extend="chartExtend"
    :colors="colors"
  ></ve-line>
</template>
<script>
// import * as echarts from echarts/lib/echarts.js
// import * as echarts from 'echarts'

// import 'v-charts-v2/lib/line'
// import * as echarts from "echarts/lib/echarts.js";
export default {
  props: {
    echartDataSku: {
      type: Object,
      default() {
        return {
          columns: [],
          rows: [],
        };
      },
    },
  },

  data() {
    return {
      colors: ["#5470c6"],
      chartExtend: {
        grid: {
          bottom: "5%",
        },
        legend: {
          show: false,
        },
        xAxis: {
          show: false,
        },
        yAxis: {
          axisLabel: {
            formatter: (value) => {
              // 统一转换为"万"单位，保留2位小数
              return value.toFixed(2) + "万";
            },
          },
        },
        series: {
          smooth: false,
        },
        tooltip: {
          formatter: (params) => {
            return params
              .map((item) => {
                const val = item.value[1];
                const name = item.seriesName;
                // 判断是否是比率数据
                const isRate = name.includes("率");
                const formattedVal = val.toFixed(2);
                //   ? (val * 100).toFixed(2) + "%"
                //   : (val / 10000).toFixed(2) + "万";
                return `${name}: ${formattedVal}万`;
              })
              .join("<br>");
          },
        },
      },
      chartSettings: {
        xAxis: { show: false },
        yAxis: { show: true }, // 显示Y轴
        // yAxisType: ["0.0"], // 统一数字格式
        axisSite: { right: [] },
      },
      axisOption: {},
    };
  },
  watch: {
    echartDataSku: {
      handler(newVal) {
        // 数据预处理：统一转换单位为万
        this.axisOption = {
          columns: newVal.columns,
          rows: newVal.rows.map((row) => {
            const newRow = {};
            newVal.columns.forEach((col) => {
              newRow[col] = col.includes("渠道")
                ? row[col] // 比率保持不变
                : row[col] / 10000; // 其他数据转为万单位
            });
            return newRow;
          }),
        };
        console.log(JSON.stringify(this.axisOption));

        this.$nextTick(() => {
          this.$refs.table.echarts.resize();
        });
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    initChart() {
      this.axisOption = this.echartDataSku;
    },
  },
};
</script>
